<template>
  <div>
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      top="5vh"
      @close.native="cancel"
      :close-on-click-modal="false">
      <el-form ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="80px">
        <el-form-item label="标题："
          prop="title">
          <el-input v-model="form.title"
            placeholder="请输入标题"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="正文："
          prop="content">
          <el-input v-model="form.content"
            type="textarea"
            rows="7"
            placeholder="请输入内容"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="发布日期："
          prop="content">
          <el-date-picker style="width:100%"
            v-model="form.content"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :disabled="isFlag=='look'">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="附件："
          prop="fileName">
          <el-upload v-if="!isLook"
            ref="uploadRef"
            class="upload-demo"
            action="#"
            :limit="1"
            :on-change="handleChange"
            :auto-upload="false"
            :show-file-list="false"
            :on-exceed="handleExceed"
            :accept="accept">
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
            <div slot="tip"
              class="el-upload__tip">
              <el-tag closable
                @close="closeFile"
                v-if="form.fileName">
                {{form.fileName}}
              </el-tag>
            </div>
          </el-upload>
          <el-tooltip v-else
            class="item"
            effect="dark"
            content="点击下载文件"
            placement="top">
            <el-link style="padding-top: 5px;"
              type="primary"
              :underline="false"
              @click="downloadLink(form)">{{ form.fileName }}</el-link>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="评论："
          v-if="form.commentList && form.commentList.length > 0">
          <el-table ref="tableData"
            :data="form.commentList"
            tooltip-effect="dark"
            border>
            <el-table-column prop="content"
              label="评论内容"
              align="center" />
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForm"
          v-if="!isLook">确 定</el-button>
        <el-button @click="
          cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile } from '@/api/common.js'
import {
  insertArticle,
  editArticle,
  articleDetail
} from '@/api/publishManage.js'
export default {
  data() {
    return {
      dialogVisible: false,
      isLook: false,
      accept: '*',
      title: '',
      form: {
        title: '',
        source: '',
        content: '',
        flag: 0,
        fileId: null,
        fileName: null
      },
      file: null,
      rules: {
        title: [{ required: true, message: '标题不能为空！', trigger: 'blur' }],
        source: [
          { required: true, message: '来源不能为空！', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空！', trigger: 'blur' }
        ],
        fileName: [{ required: true, message: '请上传', trigger: 'blur' }]
      }
    }
  },
  created() {},
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      this.isLook = obj.isLook
      this.form.flag = obj.flag
      if (obj.data) {
        // this.form = Object.assign(obj.data)
        articleDetail({ articleId: obj.data.articleId }).then(res => {
          this.form = res.data
        })
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.file) {
            const formData = new FormData()
            formData.append('file', this.file)
            formData.append('pathType', this.file.name.split('.').pop())
            uploadFile(formData).then(res => {
              this.form.fileId = res.data.fileId
              if (this.form.articleId) {
                editArticle(this.form).then(() => {
                  this.cancel()
                })
              } else {
                insertArticle(this.form).then(() => {
                  this.cancel()
                })
              }
            })
          } else {
            if (this.form.articleId) {
              editArticle(this.form).then(() => {
                this.cancel()
              })
            } else {
              insertArticle(this.form).then(() => {
                this.cancel()
              })
            }
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.isLook = false
      this.file = null
      this.$emit('close')
    },
    handleChange(file) {
      this.file = file.raw
      this.form.fileName = file.name
    },
    // 多次上传覆盖
    handleExceed(file) {
      console.log('[ file ] >', file)
      this.$refs.uploadRef.clearFiles()
      // this.handleChange(file[0])
      this.file = file[0]
      this.form.fileName = file[0].name
    },
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.filePath)
    },
    closeFile() {
      this.file = null
      this.$refs.uploadRef.clearFiles()
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-table .cell) {
  font-size: 16px;
}
:deep(.el-table th > .cell) {
  font-size: 18px;
}
</style>
